//获取用户id
let id = localStorage.getItem("id");
resetCar();
//购物车
loadProductList();
// 商品详情
function loadProductList() {
  var uid = id;
  console.log(uid);
  //商品数组定义成全局变量
  var produceArr;
  // 初始为第几页商品
  var pagenum = 0;
  //一页多少个商品
  var pagesize = 8;

  // var carGood = document.querySelector('#list')
  // console.log(carGood);

  //地址
  var url = "http://jx.xuzhixiang.top/ap/api/allproductlist.php";
  //商品列表 uid写死 成zhangh这个用户的uid  所有用户登陆以后都看117479 这个用户上传的商品
  let p = axios.get(url, { params: { uid: 131247, pagenum, pagesize } });
  console.log(uid);
  console.log(p);
  p.then((r) => {
    //服务器返回数据
    // console.log(r.data);
    //分析 商品数组
    produceArr = r.data.data;
    // console.log(r.data.data);
    // console.log(produceArr);
    //页面结构 desc详情  target="_blank" 新页面打开
    var str = "";
    produceArr.forEach((pObj) => {
      str += `
            <li id="shopGood"> 
            <div>
              <a class="cover f-pr f-blk j-statistics" href="../html/item.html?id=${pObj.pid}">
                <img src="${pObj.pimg}" class="f-img"></a>
                  <div class="cnt f-tc">
                    <h3 class="f-thide2">
                      <a   target="_blank" href="../html/item.html?id=${pObj.pid}">
                          ${pObj.pdesc}</a>
                    </h3>
                    <p class="txt f-thide">¥<em>${pObj.pprice}</em></p>
                  </div>
            </div>
          </li>
  `;
    });
    // @ts-ignore
    document.querySelector("#list").innerHTML = str;
  });
}

function resetCar() {
  //用户id
  var uid = id;
  let carListAPI = "http://jx.xuzhixiang.top/ap/api/cart-list.php";
  axios.get(carListAPI, { params: { id: uid } }).then((r) => {
    // console.log(r.data);
    let liArr = r.data.data;
    // console.log(liArr);
    let carArrStr = "";
    let  Allnumber = "";
    let  Allnumber1 = "";
    let Allprice = "";
    var price = 0;
    var number = 0;
    liArr.forEach((v, i) => {
      //每次循环进来添加商品总数和总价
      number += parseInt(v.pnum);
      price += parseInt(v.pnum * v.pprice);
      carArrStr += `
     
    <li class="f-cb" id="shopGood" data-id="${v.pid}">
    <div class="check f-fl">
      <i class="checkbox u-checkbox single" ondblclick="shuang(this)" onclick="singleCheck(${v.pid}),this"> </i>
    </div>
    <div class="cnt f-fl">
      <div class="coverwrap f-fl">
        <div class="cover f-bd2">
          <a target="_blank" href="../html/item.html?id=${v.pid}">
            <img src="${v.pimg} ">
          </a>
        </div>
      </div>
      <div class="msg f-fl">
        <a target="_blank" href=" ${v.pid} ">
          <p class="tit f-thide">
            ${v.pname}
          </p>
        </a>
        <p class="sku s-fc4 f-thide">白色</p>
      </div>
  
      <div class="price f-fl f-tc">¥<em>${v.pprice}</em></div>
      <div class="ctrl f-fl f-pr f-tc" >
        <div class="u-counter f-fl number">
          <a class="btn j-x reduce">
          <i class="u-icn u-icn-27" onclick="reduce(${v.pid},this)"
          data-pid="${v.pid}" data-pprice="${v.pprice}"></i></a>
          <span class="tot">
            <input type="text" data-id="${v.pid}" min="1"
            class="text f-fs1 j-x" onChange= "pnumChange(${v.pid},this)"
            value="${v.pnum} ">
          </span>
          <a  class="btn j-x plus">
          <i class="u-icn u-icn-28" onclick="plus(${v.pid},this)"
          data-pid="${v.pid}" data-pprice="${v.pprice}"
          ></i></a>
        </div>
      
      </div>
      <div class="price line f-fl f-tc" id="price"> ¥${v.pnum * v.pprice}</div>
      <div class="delete f-fl" id="delect" onclick="delBtn(${
        v.pid
      },this)" ></div>
    </div>
  </li>
  
  `;
      
     
    });
    Allprice += `<em>${price}  </em>`;
    Allnumber += `已选择<em class="s-fcTheme">${number} </em>件商品`;
    Allnumber1 += `  <div class="f-fl product" >
    全部商品&nbsp;(&nbsp; ${number} &nbsp;)&nbsp;
  </div>`;
    // console.log(number,price);
    //更新页面
   
    document.querySelector("#carList").innerHTML = carArrStr;
    document.querySelector("#heji").innerHTML = Allprice;
    // console.log(document.querySelector(".product"));
    document.querySelector("#product").innerHTML =  Allnumber;
    document.querySelector(".first").innerHTML =  Allnumber1;
    
  });

  //更新本地数据  onclick='delBtn(${v.pid}
  // localStorage.setItem("carArrStr", JSON.stringify(carArrStr));
}
resetCar();

//删除
function delBtn(pid, btn) {
  console.log(pid);
  console.log(btn);
  var uid = id;
  // var del = document.querySelector("#delect");
  // var shopGood = document.querySelector("#shopGood")

  // console.log(shopGood);
  //删除成功

  let url = "http://jx.xuzhixiang.top/ap/api/cart-delete.php";
  axios.get(url, { params: { pid, uid } }).then((r) => {
    console.log(r.data);
    //删除成功 事件委托 要获取父元素的父元素，必须分步进行
    var fr = btn.parentNode;
    // console.log(btn.parentNode);
    // console.log(fr.parentNode);

    fr.parentNode.remove();
  });
}

// 选择
function allCheck(red) {

  // for (var i in all) {
  //   all[i].classList.add("z-checked");
  // }

  // for (var i in single) {
  //   single[i].classList.add("z-checked");
  // }
  console.log($(".all").is("z-checked"));
  if ($(".all").is("z-checked") == true) {
    $(".single").removeClass("z-checked");
    $(".checkbox").removeClass("z-checked");
  }
  if ($(red).is("z-checked") == false) {
    $(".single").addClass("z-checked");
    $(".checkbox").addClass("z-checked");
  }
  console.log(all);
  console.log($(red).is("z-cheched"));
}

function singleCheck(singleRed) {
  // var single = document.querySelector(".single")
  // singleRed.classList.add("z-checked");
  console.log(singleRed);
  $(singleRed).addClass("z-checked");

  console.log($(singleRed));
}
function alldoubt(v) {
  $(".check .single").removeClass("z-checked");
  $(v).removeClass("z-checked");
  $(".checkbox").removeClass("z-checked");
}
function shuang(su) {
  console.log(su);
  $(su).removeClass("z-checked");
}

// 点击减少
function reduce(pid,ipt) {
  console.log($(ipt).parent().siblings().children(".text").val());
  let reduce = $(ipt).parent().siblings(1).children(".text").val();
  let reducenum = $(ipt).parent().siblings(1).children(".text").val(parseInt(reduce) - 1)
  console.log(reducenum.val());
  console.log($(ipt).parent().parent().parent().siblings("#price").children().text());

  console.log($(ipt).attr("data-pprice"));
  let pprice = $(ipt).attr("data-pprice")
  let uid = id;
  let pnum = reduce

  // let pnum = addnum;
  let url = "http://jx.xuzhixiang.top/ap/api/cart-update-num.php";
  axios
    .get(url, {
      params: {
        pnum,
        uid,
        pid,
      },
    })
    .then((r) => {
      //修改成功
      console.log(r.data);
      console.log(pprice);
      let current = reduce * pprice;
      console.log(current);
      $(ipt).parent().parent().parent().siblings("#price").html("￥" + current);
    });


  


}
//点击增加
function plus(pid, ipt) {
  // pnumChange(pid)

  // $(".text").eq($(".plus")).
  // console.log($(".text").eq($(".plus").index()).val());
  console.log($(ipt).parent().siblings(1).children(".text").val());
  let add = $(ipt).parent().siblings(1).children(".text").val();
  let addnum = $(ipt).parent().siblings(1).children(".text").val(parseInt(add) + 1)
  // console.log(addnum.val());
  // console.log($(ipt).parent().parent().parent().siblings("#price").children().text());
  let price = $(ipt).parent().parent().parent().siblings("#price").children().text();
  console.log($(ipt).attr("data-pprice"));
  let pprice = $(ipt).attr("data-pprice")
  let uid = id;
  let pnum = add

  // let pnum = addnum;
  let url = "http://jx.xuzhixiang.top/ap/api/cart-update-num.php";
  axios
    .get(url, {
      params: {
        pnum,
        uid,
        pid,
      },
    })
    .then((r) => {
      //修改成功
      console.log(r.data);
      console.log(pprice);
      let current = add * pprice;
      console.log(current);
      $(ipt).parent().parent().parent().siblings("#price").html("￥"+current)
    });

}
//修改 pid知道修改的是那个商品，ipt 获取输入框本身
function pnumChange(pid, ipt) {
  console.log(pid, ipt);
  console.log("修改了数据");
  let pnum = pid.value;
  let uid = id;
  console.log(pnum);
  let url = "http://jx.xuzhixiang.top/ap/api/cart-update-num.php";
  axios
    .get(url, {
      params: {
        pnum,
        uid,
        pid,
      },
    })
    .then((r) => {
      //修改成功
      console.log(r.data);
    });
}


// function addCarHandle(pid,pnum) {
//   {
//     console.log("加入购物车");
//     // 5-2发起请求
//     let uid = localStorage.getItem("id");
//     // let pnum = document.querySelector("#auto-id-3").value;
//     // console.log(pnum);
//     let url = "http://jx.xuzhixiang.top/ap/api/add-product.php";
//     axios
//       .get(url, {
//         params: {
//           uid,
//           pid,
//           pnum,
//         },
//       })
//       .then((r) => {
//         resetCar()
//       });
//   }
// }
